<template>
  <view class="page-default">
    <c-nav-bar title="社团介绍" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="content mt-2 rounded-4 px-4 pb-8 pt-4 line-height-6">
      <view v-for="item in list" :key="item.title" class="rounded-4 bg-white" @click="navigateTo">
        <view class="mb-4 w-full flex items-center justify-between">
          <image :src="item.imgUrl" class="m-3 h-20 w-28 rounded-2" />
          <view class="flex-1">
            <view class="">
              <text class="text-#1A2B5C font-bold">
                {{ item.title }}
              </text>
            </view>

            <view class="mr-2 h-15 flex flex-1 items-end justify-between">
              <view class="relative w-full rounded-2 bg-#f9fafb py-2 pl-2 pr-4">
                <view class="text-xs text-#6E7B8B line-height-4">
                  {{ item.subTitle }}
                </view>
                <view class="absolute right-2 top-1">
                  <image src="/static/images/quotation.png" mode="aspectFit" class="h-4 w-4" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';

const list = ref([
  {
    imgUrl: '/static/images/clubs.png',
    title: '泥塑地理园',
    subTitle: '以泥为媒，探索地理',
    status: true,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '泥塑地理园',
    subTitle: '以泥为媒，探索地理以泥为媒，探索地理',
    status: true,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '辅助信息',
    subTitle: '辅助信息填写',
    status: false,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '学习经历',
    subTitle: '学习经历录入',
    status: false,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '中考成绩',
    subTitle: '中考成绩记录',
    status: true,
  },
  {
    imgUrl: '/static/images/clubs.png',
    subTitle: '团籍关系备案',
    status: true,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '监护人信息',
    subTitle: '监护人资料填写',
    status: false,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '校园信息',
    subTitle: '在校信息查询',
    status: true,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '证件照',
    subTitle: '证件照片上传',
    status: false,
  },
  {
    imgUrl: '/static/images/clubs.png',
    title: '证件照片上传',
    subTitle: '承诺签名，严纪优学',
    status: false,
  },

]);

const navigateTo = () => {
  uni.redirectTo({
    url: '/pages/biz/clubs/detail',
  });
};
</script>

<style lang="scss" scoped>
:deep(uni-page-body) {
  background-color: #f5f9fc !important;
}
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-white {
  background: linear-gradient(to bottom, #f6fdfa, #fff, #fff);
}

.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
</style>
